<template>
  <div class="nav-menu">
    <div class="logo" style="background-color: #fff">
      <img
        src="@/assets/img/logo.png"
        alt=""
        style="height: 55px; width: 55px"
      />
      <div class="title">
        <span>爱尚收后台</span>
      </div>
    </div>

    <el-menu
      :default-active="defaultVale"
      class="el-menu-vertical-demo"
      background-color="#425066"
      :collapse="collapse"
      text-color="#fff"
      :unique-opened="true"
    >
      <el-menu-item index="1" @click="indexReq">
        <el-icon><HomeFilled /></el-icon>
        <template #title>首页</template>
      </el-menu-item>
      <el-sub-menu index="2" class="el-sub-menu-chuck">
        <template #title>
          <el-icon><location /></el-icon>
          <span>系统管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1" @click="userinfoReq">员工管理</el-menu-item>
          <el-menu-item index="1-2" @click="roleReq">仓库管理</el-menu-item>
        </el-menu-item-group>
        <el-sub-menu index="1-3">
          <template #title>日志管理</template>
          <el-menu-item index="1-3-1" @click="configMenuReq"
            >操作日志</el-menu-item
          >
          <el-menu-item index="1-3-2" @click="configLoginReq"
            >登录日志</el-menu-item
          >
        </el-sub-menu>
      </el-sub-menu>

      <el-sub-menu index="3">
        <template #title>
          <el-icon><Wallet /></el-icon>
          <span> 订单管理</span>
        </template>
        <el-menu-item index="3-1" @click="$router.push({ name: 'category' })">
          审核订单
        </el-menu-item>
        <el-menu-item
          index="3-2"
          @click="$router.push({ name: 'categoryList' })"
        >
          订单列表
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="4">
        <template #title>
          <el-icon><Wallet /></el-icon>
          <span> 商品管理</span>
        </template>
        <el-menu-item index="4-1" @click="$router.push({ name: 'goodsList' })">
          商品列表
        </el-menu-item>
        <el-menu-item
          index="4-2"
          @click="$router.push({ name: 'goodsCategory' })"
        >
          商品分类
        </el-menu-item>
      </el-sub-menu>
      <el-menu-item index="5" @click="overviewReq">
        <el-icon><Monitor /></el-icon>
        <template #title>系统监控</template>
      </el-menu-item>
      <el-menu-item index="6">
        <el-icon><Document /></el-icon>
        <template #title>通知公告</template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from "vue";
import { useStore } from "@/store";
import router from "@/router";
export default defineComponent({
  props: {
    collapse: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    const store = useStore();
    // data
    const defaultVale = ref("3");
    const isCollapse = ref(true);
    // 事件处理
    const userinfoReq = () => {
      router.push({
        path: "/main/system/user/user"
      });
    };
    const indexReq = () => {
      router.push({
        name: "index"
      });
    };
    const roleReq = () => {
      router.push({
        name: "role"
      });
    };
    const overviewReq = () => {
      router.push({
        name: "overview"
      });
    };
    const configMenuReq = () => {
      router.push({
        name: "configMenu"
      });
    };
    const configLoginReq = () => {
      router.push({
        name: "configLogin"
      });
    };
    return {
      isCollapse,
      userinfoReq,
      defaultVale,
      indexReq,
      roleReq,
      overviewReq,
      configMenuReq,
      configLoginReq
    };
  }
});
</script>

<style scoped lang="less">
.nav-menu {
  /deep/ .el-menu {
    border-right: none;
  }
  // 控制折叠效果
  /deep/ .el-menu-item-group__title {
    padding: 0px;
    line-height: normal;
    font-size: 12px;
    color: var(--el-text-color-secondary);
  }
  .logo {
    width: 100%;
    height: 60px;
    display: flex;
    img {
      height: 100%;
      margin: 0 10px;
    }
    .title {
      font-size: 14px;
      font-weight: 800;
      color: #252323;
      vertical-align: top;
      margin: auto 2px;
    }
    .tac {
      width: 100%;
      .el-menu-vertical-demo {
        .el-col-12 {
          max-width: 0;
          flex: 0 0 0 0;
          width: 100%;
        }
      }
    }
  }
}
</style>
